<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .gray {
            background-color: gray;
        }
    </style>
</head>
<body>
<div id="wrap">
    <!--@keydown.down 监听向下的方向键按下的时候触发的函数,绑定input是因为只有聚焦后才能触发键盘事件
    @keydown.up.prevent监听向上的方向键并阻止光标向前移动,注意的是@keyup="jsonp2($event)" 不要忘记加$
    -->
    <input type="text" v-model="val" @keyup="jsonp2($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
    <ul>
        <!--:class='{gray:$index==now}'   :class是v-bind:class的简写,后面可以跟对象,数组,json,数据格式.{gray:$index==now}是指当前标号是否与下标相同,相同则gray生效-->
        <li v-for="item in valarr" :class="{gray:$index==now}">{{item}}</li>
    </ul>
    <p v-show="valarr.length==0">暂无数据</p>
</div>
</div>
</body>
</html>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#wrap',
        data: {
            //z在函数中使用data中的元素的时候不要忘记加this.
            val: '',
            valarr: [],
            now: -1,
        },
        methods: {
            jsonp2: function (ev) {
//                37,38,39,40是方向键,左上右下的键码,阻止上下选择的时候进行查询
                if(ev.keyCode==37 || ev.keyCode==38||ev.keyCode==39 || ev.keyCode==40)return;
//                在新窗口打开查询内容,并且清空查询数据
                if(ev.keyCode==13){
                    window.open('https://www.baidu.com/s?wd='+this.val);
                    this.val='';
                }
                //百度抓包使用的时候,不要忘记jsonp:'cd',
                this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
                    wd: this.val,
                }, {
                    jsonp: 'cb'
                }).then(function (res) {
                    this.valarr = res.data.s;
//                    console.log(res.data.s);
                }, function (res) {
                    alert(res.status);
                });
            },
            changeDown: function () {
                this.now++;
                console.log(this.now);
                if (this.now >= this.valarr.length) {
                    this.now = 0
                };
                this.val=this.valarr[this.now];
            },
            changeUp: function () {
                this.now--;
                console.log(this.now);
                if (this.now <= -1) {
                    this.now = this.valarr.length-1;
                };
                this.val=this.valarr[this.now];
            }
        },
    })
</script>
